<script setup>
import { ref, watch } from 'vue'
import { useFileUpload } from '~/composables/useFileUpload'
import { useImageCache } from '~/composables/useImageCache'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'large' // large, medium, small
  }
})

const emit = defineEmits(['update:modelValue'])

const { selectedFile, uploading, triggerFileSelect, uploadFile } = useFileUpload()
const { getCoverImage } = useImageCache()

// 监听文件选择
watch(selectedFile, async (newFile) => {
  if (newFile) {
    const ossId = await uploadFile()
    if (ossId) {
      // 向父组件传递 ossId，用于后端存储
      emit('update:modelValue', ossId)
    }
  }
})

const handleUpload = () => {
  triggerFileSelect()
}

const sizeClass = computed(() => {
  return `avatar-${props.size}`
})
</script>

<template>
  <div class="avatar-upload" :class="sizeClass" @click="handleUpload">
    <div v-if="modelValue" class="avatar-preview">
      <img :src="getCoverImage(modelValue)" alt="头像预览" />
      <div class="upload-overlay">
        <span v-if="uploading">上传中...</span>
        <span v-else>点击更换</span>
      </div>
    </div>
    <div v-else class="upload-placeholder">
      <div class="upload-icon">+</div>
      <div class="upload-text">
        <span v-if="uploading">上传中...</span>
        <span v-else>点击上传头像</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.avatar-upload {
  position: relative;
  border-radius: 12px;
  border: 2px dashed #e1e5e9;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  
  &:hover {
    border-color: #1dbf73;
    
    .upload-overlay {
      opacity: 1;
    }
  }
  
  &.avatar-large {
    width: 120px;
    height: 120px;
  }
  
  &.avatar-medium {
    width: 80px;
    height: 80px;
  }
  
  &.avatar-small {
    width: 60px;
    height: 60px;
  }
}

.avatar-preview {
  position: relative;
  width: 100%;
  height: 100%;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }
  
  .upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 10px;
  }
}

.upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  
  .upload-icon {
    font-size: 24px;
    margin-bottom: 8px;
    color: #ccc;
  }
  
  .upload-text {
    font-size: 12px;
    text-align: center;
  }
}

.avatar-upload.avatar-medium {
  .upload-icon {
    font-size: 20px;
    margin-bottom: 6px;
  }
  
  .upload-text {
    font-size: 11px;
  }
}

.avatar-upload.avatar-small {
  .upload-icon {
    font-size: 16px;
    margin-bottom: 4px;
  }
  
  .upload-text {
    font-size: 10px;
  }
}
</style>